@import (reference) "@/styles/variables.less";

// BatchProcessor 组件样式
.batch-processor {
  .batch-processor__header {
    @apply flex items-center justify-between pb-6 border-b border-gray-200;

    .batch-processor__title {
      @apply text-3xl font-bold text-gray-900;
    }

    .batch-processor__subtitle {
      @apply text-gray-600 mt-1;
    }

    .batch-processor__controls {
      @apply flex items-center space-x-3;
    }
  }

  .batch-processor__content {
    @apply space-y-8;

    .batch-processor__grid {
      @apply grid grid-cols-1 lg:grid-cols-3 gap-6;
    }

    .batch-processor__file-section {
      @apply lg:col-span-2 space-y-4;
    }

    .batch-processor__settings-section {
      @apply space-y-4;
    }

    .batch-processor__progress-section {
      @apply space-y-6;

      .batch-processor__progress-header {
        @apply flex items-center justify-between;

        .batch-processor__progress-title {
          @apply text-lg font-semibold text-gray-900;
        }

        .batch-processor__progress-actions {
          @apply flex items-center space-x-3;
        }
      }
    }

    .batch-processor__stats-section {
      @apply grid grid-cols-2 md:grid-cols-4 gap-4;
    }
  }
}

// FileList 组件样式
.file-list {
  .file-list__header {
    @apply flex items-center justify-between;

    .file-list__title {
      @apply text-lg font-semibold text-gray-900;
    }

    .file-list__controls {
      @apply flex items-center space-x-2;
    }
  }

  .file-list__dropzone {
    @apply border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200;

    &.file-list__dropzone--dragging {
      @apply border-blue-400 bg-blue-50;
    }

    &.file-list__dropzone--idle {
      @apply border-gray-300 hover:border-gray-400;
    }

    .file-list__dropzone-icon {
      @apply w-12 h-12 text-gray-400 mx-auto mb-4;
    }

    .file-list__dropzone-title {
      @apply text-lg font-medium text-gray-900 mb-2;
    }

    .file-list__dropzone-description {
      @apply text-gray-600 mb-4;
    }
  }

  .file-list__container {
    @apply card p-4;

    .file-list__items {
      @apply space-y-3 max-h-80 overflow-y-auto;
    }

    .file-list__item {
      @apply flex items-center justify-between p-3 bg-gray-50 rounded-lg transition-all duration-200;

        &:hover {
          background: @gray-100;
          transform: scale(1.02);
        }

      .file-list__item-info {
        @apply flex items-center space-x-3 flex-1;

        .file-list__item-icon {
          @apply w-8 h-8 text-blue-500;
        }

        .file-list__item-content {
          @apply flex-1 min-w-0;

          .file-list__item-header {
            @apply flex items-center space-x-2;

            .file-list__item-name {
              @apply font-medium text-gray-900 truncate;
            }

            .file-list__item-format {
              @apply px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded;
            }
          }

          .file-list__item-details {
            @apply flex items-center space-x-4 text-sm text-gray-600 mt-1;
          }
        }
      }

      .file-list__item-remove {
        @apply p-1 text-gray-400 hover:text-red-500 transition-colors;
      }
    }

    .file-list__footer {
      @apply flex items-center justify-between mt-4 pt-4 border-t border-gray-200;

      .file-list__count {
        @apply text-sm text-gray-600;
      }

      .file-list__add-more {
        @apply btn btn-outline btn-sm flex items-center space-x-1;
      }
    }
  }
}

// 状态卡片样式
.batch-stats {
  .batch-stats__card {
    @apply card p-4 text-center transition-all duration-200;

    &:hover {
      @apply transform scale-105 shadow-lg;
    }

    .batch-stats__value {
      @apply text-2xl font-bold;
    }

    .batch-stats__label {
      @apply text-sm text-gray-600;
    }
  }

  .batch-stats__card--total {
    .batch-stats__value {
      @apply text-blue-600;
    }
  }

  .batch-stats__card--completed {
    .batch-stats__value {
      @apply text-green-600;
    }
  }

  .batch-stats__card--active {
    .batch-stats__value {
      @apply text-yellow-600;
    }
  }

  .batch-stats__card--failed {
    .batch-stats__value {
      @apply text-red-600;
    }
  }
}

// ProcessSettings 组件样式
.process-settings {
  .process-settings__header {
    @apply flex items-center justify-between;

    .process-settings__title {
      @apply text-lg font-semibold text-gray-900;
    }
  }

  .process-settings__container {
    @apply card p-4 space-y-6 max-h-96 overflow-y-auto;
  }

  .process-settings__section {
    @apply space-y-3;

    .process-settings__label {
      @apply block text-sm font-medium text-gray-700;
    }

    .process-settings__task-types {
      @apply grid grid-cols-3 gap-3;
    }

    .process-settings__task-type {
      @apply p-3 rounded-lg border-2 text-center transition-colors border-gray-200 hover:border-gray-300;

      &.process-settings__task-type--active {
        @apply border-blue-500 bg-blue-50 text-blue-700;
      }

      .process-settings__task-type-icon {
        @apply w-6 h-6 mx-auto mb-2;
      }

      .process-settings__task-type-label {
        @apply text-sm font-medium;
      }
    }

    .process-settings__select {
      @apply w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    }

    .process-settings__description {
      @apply text-xs text-gray-500 mt-1;
    }

    .process-settings__checkbox-group {
      @apply space-y-2;
    }

    .process-settings__checkbox {
      @apply flex items-center space-x-2;

      input {
        @apply rounded border-gray-300 text-blue-600 focus:ring-blue-500;
      }

      span {
        @apply text-sm text-gray-700;
      }
    }

    .process-settings__grid {
      @apply grid grid-cols-2 gap-4;
    }

    .process-settings__subtitle {
      @apply text-sm font-medium text-gray-700;
    }
  }
}

// 响应式设计
@media (max-width: @screen-md) {
  .batch-processor {
    .batch-processor__content {
      .batch-processor__grid {
        @apply grid-cols-1;
      }

      .batch-processor__stats-section {
        @apply grid-cols-1;
      }
    }
  }

  .batch-processor__header {
    @apply flex-col items-start space-y-4;

    .batch-processor__controls {
      @apply w-full justify-center;
    }
  }

  .process-settings {
    .process-settings__section {
      .process-settings__task-types {
        @apply grid-cols-1;
      }

      .process-settings__grid {
        @apply grid-cols-1;
      }
    }
  }
}

@media (max-width: @screen-sm) {
  .file-list {
    .file-list__item {
      @apply flex-col items-start space-y-3;

      .file-list__item-info {
        @apply w-full;
      }

      .file-list__item-remove {
        @apply self-end;
      }
    }
  }

  .batch-processor__content {
    .batch-processor__progress-header {
      @apply flex-col items-start space-y-3;

      .batch-processor__progress-actions {
        @apply w-full justify-center;
      }
    }
  }
}